import { onUnmounted } from 'vue'

function useDOMCreate(name: string | HTMLDivElement) {
  if (typeof name === 'object') {
    name.id = 'message'
    document.body.appendChild(name)
    onUnmounted(() => {
      document.body.removeChild(name)
    })
  } else if (typeof name === 'string') {
    // 在组件挂载前在body中创建div，且id值为name变量的值
    const node = document.createElement('div')
    node.id = name
    document.body.appendChild(node)

    // 组件卸载时，删除div节点
    onUnmounted(() => {
      document.body.removeChild(node)
    })
  }
}

export default useDOMCreate
